<nz-spin [nzSize]="'large'" [nzSpinning]="loadingInfo">
  <div class="content-warp">
    <div class="content-header">
      <i class="anticon anticon-left-circle-o" (click)="goBack()"></i>
      <span class="content-title">编辑展位单元</span>
    </div>
    <div class="content-body">
      <div nz-row>
        <div nz-col [nzSpan]="17">
          <form nz-form [formGroup]="validateForm">
            <div nz-form-item nz-row>
              <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>展示名称：</div>
              <div nz-form-control nz-col [nzSm]="12" [nzXs]="24" [nzValidateStatus]="getFormControl('name')">
                <nz-input formControlName="name" [nzPlaceHolder]="'请输入展示名称'" [nzSize]="'large'">
                </nz-input>
                <div nz-form-explain *ngIf="getFormControl('name').dirty&&getFormControl('name').hasError('required')">请输入展示名称</div>
              </div>
            </div>

            <div nz-form-item nz-row>
              <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>展示图片：</div>
              <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                <div>
                  <app-upload [(fileList)]="fileList" [(piclist)]="picList" [picSizeInfo]="picSizeInfo" [canChange]="true" (piclistChange)="fileChange()"
                    (fileListChange)="fileChange()"></app-upload>
                </div>
              </div>
            </div>

            <div nz-form-item nz-row>
              <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>转跳类型：</div>
              <div nz-form-control nz-col [nzSm]="14" [nzXs]="24">
                <div>
                  <nz-select style="width: 180px;" [(ngModel)]="selectedOption" (nzOpenChange)="checkType($event)" [ngModelOptions]="{standalone: true}">
                    <nz-option *ngFor="let option of options" [nzLabel]="option.label" [nzValue]="option">
                      <ng-template #nzOptionTemplate>
                        <i class="anticon" [ngClass]="'anticon-'+option.label"></i> {{option.label}}</ng-template>
                    </nz-option>
                  </nz-select>
                </div>
              </div>
            </div>

            <div nz-form-item nz-row *ngIf="type === 'activity'">
              <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>选择活动：</div>
              <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('relationID')">
                <div class="init-content" *ngIf="!checkedActivityInfo['id']">
                  <button nz-button [nzType]="'primary'" (click)="addActivity()">
                    <span>
                      <i class="anticon anticon-plus"></i> 添加活动</span>
                  </button>
                </div>
                <div class="checked-goods-container" *ngIf="!!checkedActivityInfo['id']">
                  <div class="name">
                    <nz-tag [nzColor]="checkedActivityInfo['type']['color']">{{ checkedActivityInfo['type']['text'] }}</nz-tag>
                    <span>{{checkedActivityInfo['name']}}</span>
                  </div>
                  <div class="info">
                    <span class="title">活动有效期:</span>
                    <span class="title-content">从 {{ checkedActivityInfo['start_date'] }} 至 {{ checkedActivityInfo['end_date'] }}</span>
                    <span class="view-goods-btn" (click)="toggleViewActivityGoods()">查看商品
                      <i class="anticon" [ngClass]="{'anticon-up':checkedActivityInfo['flexable'],'anticon-down':!checkedActivityInfo['flexable']}"></i>
                    </span>
                    <button nz-button [nzType]="'primary'" [nzSize]="'large'" class="fr change-goods-btn" (click)="addActivity()">
                      <span>更改活动</span>
                    </button>
                  </div>
                  <div class="goods-wrap" *ngIf="checkedActivityInfo['flexable'] && checkedActivityInfo['goodsDetail']">
                    <div>
                      <div>ID:{{ checkedActivityInfo['goodsDetail']['id'] }}</div>
                      <div class="goods-bt">
                        <div class="goods-name">{{ checkedActivityInfo['goodsDetail']['goods_name'] || checkedActivityInfo['goodsDetail']['name']
                          }}</div>
                        <div class="goods-right">
                          <div>商品价格</div>
                          <div>￥ {{ checkedActivityInfo['goodsDetail']['price'] }}</div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div nz-form-item nz-row *ngIf="type === 'coupons'">
              <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>选择卡券：</div>
              <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('relationID')">
                <div class="init-content" *ngIf="!checkedCouponInfo['id']">
                  <button nz-button [nzType]="'primary'" (click)="addCoupon()">
                    <span>
                      <i class="anticon anticon-plus"></i> 添加卡券</span>
                  </button>
                </div>
                <div class="checked-goods-container" *ngIf="!!checkedCouponInfo['id']">
                  <div class="name">
                    <img src="{{ 'assets/images/coupon_icon.png' }}" alt="">
                    <span>{{ checkedCouponInfo['card_coupons_name'] }}</span>
                  </div>
                  <div class="info">
                    <div>
                      <span class="title">卡券有效期</span>
                      <span *ngIf="checkedCouponInfo['term_of_validity_time_start']" style="font-size: 12px;">{{checkedCouponInfo['term_of_validity_time_start']}} - {{checkedCouponInfo['term_of_validity_time_end']}}</span>
                      <span *ngIf="checkedCouponInfo['term_of_validity']" style="font-size: 12px;">{{ '领取后' + checkedCouponInfo['term_of_validity'] + '天内有效' }}</span>
                    </div>
                    <div>
                      <span class="title" style="font-size: 12px;">卡券库存</span>
                      <span>{{checkedCouponInfo['in_stock']}}</span>
                    </div>
                    <button nz-button [nzType]="'primary'" [nzSize]="'large'" class="fr change-goods-btn" (click)="addCoupon()">
                      <span>更改内容</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>

            <div nz-form-item nz-row *ngIf="type === 'product'">
              <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>选择商品：</div>
              <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('relationID')">
                <div class="init-content" *ngIf="!checkedGoodsInfo['id']">
                  <button nz-button [nzType]="'primary'" (click)="addGoods()">
                    <span>
                      <i class="anticon anticon-plus"></i> 添加商品</span>
                  </button>
                </div>
                <div class="checked-goods-container" *ngIf="!!checkedGoodsInfo['id']">
                  <div class="name">
                    <img src="{{aliyunOssOutputUrl+'/'+checkedGoodsInfo.first_picture}}" alt="">
                    <div>{{checkedGoodsInfo.name}}</div>
                  </div>
                  <div class="info">
                    <div>
                      <span class="title">商品分类</span>
                      <nz-tag [nzColor]="'#fff'" *ngFor="let ite of checkedGoodsInfo.goods_category">{{ite}}</nz-tag>
                      <span *ngIf="checkedGoodsInfo.goods_category ? !checkedGoodsInfo.goods_category.length : true">无分类</span>
                    </div>
                    <div>
                      <span class="title">商品库存</span>
                      <span>{{checkedGoodsInfo.in_stock}}</span>
                    </div>
                    <button nz-button [nzType]="'primary'" [nzSize]="'large'" class="fr change-goods-btn" (click)="addGoods()">
                      <span>更改内容</span>
                    </button>
                  </div>
                </div>
                <div nz-form-explain *ngIf="getFormControl('relationID').dirty&&getFormControl('relationID').hasError('required')">请选择产品</div>
              </div>
            </div>
            <div nz-form-item nz-row *ngIf="type == 'page'">
              <div nz-form-label nz-col [nzSm]="4" [nzXs]="24">展示url：</div>
              <div nz-form-control nz-col [nzSm]="12" [nzXs]="24" [nzValidateStatus]="getFormControl('url')">
                <nz-input formControlName="url" [nzPlaceHolder]="'请输入展位单元url'" style="width:375px;" [nzSize]="'large'">
                </nz-input>
                <!--<div nz-form-explain *ngIf="getFormControl('url').dirty&&getFormControl('url').hasError('urlError')">请输入正确的url格式</div>-->
              </div>
            </div>
            <div nz-form-item nz-row>
              <div nz-form-label nz-col [nzSm]="4" [nzXs]="24" nz-form-item-required>排序：</div>
              <div nz-form-control nz-col [nzSm]="14" [nzXs]="24" [nzValidateStatus]="getFormControl('sort')">
                <nz-input-number
                  formControlName="sort"
                  [nzPlaceHolder]="'请输入排序'"
                  [nzStep]="1"
                  [nzSize]="'large'"
                  style="width:150px;">
                </nz-input-number>
                <div nz-form-explain *ngIf="getFormControl('sort').dirty&&getFormControl('sort').hasError('required')">请输入排序</div>
                <div nz-form-explain *ngIf="getFormControl('sort').dirty&&getFormControl('sort').hasError('min')">不能低于0</div>
                <div nz-form-explain *ngIf="getFormControl('sort').dirty&&getFormControl('sort').hasError('max')">不能超过99</div>
                <div nz-form-explain *ngIf="getFormControl('sort').dirty&&getFormControl('sort').hasError('notInteger')">请输入整数</div>
              </div>
            </div>r
            <div nz-form-item nz-row style="margin-bottom:8px;">
              <div nz-form-control nz-col [nzSpan]="14" [nzOffset]="5">
                <button nz-button [nzSize]="'large'" [nzType]="'primary'" [nzLoading]="submitStatus" (click)="_submitForm()">修 改</button>
                <button nz-button [nzSize]="'large'" [nzType]="'default'" type="button" style="margin-left: 20px" (click)="goBack()">取 消</button>
              </div>
            </div>
          </form>
        </div>
        <div nz-col [nzSpan]="7">
          <div class="preview-title">{{ previewTitle }}</div>
          <div class="preview-subtitle">{{ previewsubTitle }}</div>
          <img style="margin-top:10px;" src="{{ previewSrc ? 'assets/images/' + previewSrc + '.png' : '' }}" alt="">
        </div>
      </div>
    </div>
  </div>
</nz-spin>

<!-- 添加商品弹窗 start -->
<nz-modal [nzVisible]="goodsModalVisible" [nzTitle]="'添加商品'" [nzWidth]="'700px'" [nzContent]="modalContent" (nzOnCancel)="closeModal()"
  (nzOnOk)="confirmCheckedGoods()">
  <ng-template #modalContent>
    <div class="operate-line text-right">
      <nz-select style="width: 110px;" nzAllowClear [nzSize]="'large'" [nzPlaceHolder]="'请选择分类'" [(ngModel)]="selectedGroup" [nzShowSearch]="true">
        <nz-option *ngFor="let type of groupList" [nzLabel]="type.name" [nzValue]="type.id">
        </nz-option>
      </nz-select>
      <nz-input name="goodsName" style="width: 200px;" [nzSize]="'large'" [(ngModel)]="keyword" [nzPlaceHolder]="'输入商品名称'"></nz-input>
      <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="searchGoods()">
        <span>查 询</span>
      </button>
      <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="reset()">
        <span>重 置</span>
      </button>
    </div>
    <nz-table #nzTable [nzAjaxData]="goodsList" [nzLoading]="loading" [(nzPageIndex)]="page" [(nzPageSize)]="pageSize" [nzTotal]="total"
      (nzPageIndexChange)="getGoodsList()">
      <thead nz-thead>
        <tr>
          <th nz-th nzCheckbox>
          </th>
          <th nz-th>
            <span>商品</span>
          </th>
          <th nz-th>
            <span>商品库存</span>
          </th>
        </tr>
      </thead>
      <tbody nz-tbody>
        <tr nz-tbody-tr *ngFor="let data of goodsList">
          <td nz-td nzCheckbox>
            <i class="icon iconfont icon-radio-unchecked radio" *ngIf="currentClickGoods['id'] !== data.id" (click)="currentClickGoods = data;"></i>
            <i class="icon iconfont icon-radio-checked checked radio" *ngIf="currentClickGoods.id === data.id"></i>
          </td>
          <td nz-td style="width: 420px;">
            <img class="goods-pic" src="{{aliyunOssOutputUrl+'/'+data.first_picture}}" alt="">
            <div class="goods-info">
              <div class="goods-num">
                <span class="product-id mr-5" *ngIf="data.goods_number">
                  <nz-popover [nzTitle]="'商品编号'" *ngIf="data.goods_number.length>1">
                    <span nz-popover>商品编号:{{ data.goods_number[0]+"..." }}</span>
                    <ng-template #nzTemplate>
                      <div style="max-width:300px">
                        <span class="dis-inline" *ngFor="let item2 of  data.goods_number;let i2=index">
                          <span style="display:inline-block;width:">{{item2}}</span>
                          <span *ngIf="i2!=data.goods_number.length-1" class="ml-5 mr-5">|</span>
                        </span>
                      </div>
                    </ng-template>
                  </nz-popover>
                  <span *ngIf="data.goods_number.length==1">
                    商品编号:{{ data.goods_number[0] }}
                  </span>
                </span>
                <div class="dis-inline">
                  <nz-tag [nzColor]="'#1790FF'" *ngFor="let ite of data.goods_category">{{ite}}</nz-tag>
                </div>
              </div>
              <div class="goods-name">{{data.name}}</div>
            </div>
          </td>
          <td nz-td>
            <div style="margin-right: 30px;">
              {{data.in_stock}}
              <nz-progress [ngModel]="50" [nzShowInfo]="false"></nz-progress>
            </div>
          </td>
        </tr>
      </tbody>
    </nz-table>
  </ng-template>
</nz-modal>
<!-- 添加商品弹窗 end -->


<!-- 添加活动弹窗 -->
<nz-modal [nzVisible]="activityModalVisible" [nzTitle]="'添加活动'" [nzWidth]="'700px'" [nzContent]="activityModalContent" (nzOnCancel)="closeActivityModal()"
  (nzOnOk)="confirmCheckedActivity()">
  <ng-template #activityModalContent>
    <div class="operate-line text-right">
      <nz-input name="goodsName" style="width: 200px;" [nzSize]="'large'" [(ngModel)]="keyword" [nzPlaceHolder]="'输入活动名称'"></nz-input>
      <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="searchActivity()">
        <span>查 询</span>
      </button>
      <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="reset()">
        <span>重 置</span>
      </button>
    </div>
    <nz-table #nzTable [nzAjaxData]="activityList" [nzLoading]="loading" [(nzPageIndex)]="page" [(nzPageSize)]="pageSize" [nzTotal]="activitiesTotal"
      (nzPageIndexChange)="getActivityList()">
      <thead nz-thead>
        <tr>
          <th nz-th nzCheckbox style="width:80px;">
          </th>
          <th nz-th style="width: 240px;">
            <span>活动</span>
          </th>
          <th nz-th>
            <span>活动有限期</span>
          </th>
          <th nz-th>
            <span>活动商品</span>
          </th>
        </tr>
      </thead>
      <tbody nz-tbody>
        <ng-container *ngFor="let data of activityList;let i = index;">
          <tr nz-tbody-tr>
            <td nz-td nzCheckbox>
              <i class="icon iconfont icon-radio-unchecked radio" *ngIf="currentClickActivity['id'] !== data.id" (click)="activityClickIndex = i;getActivityGoodsList(data['id'],data['activity_goods'][0]['id']);currentClick(data)"></i>
              <i class="icon iconfont icon-radio-checked checked radio" *ngIf="currentClickActivity['id'] === data.id"></i>
            </td>
            <td nz-td>
              <div class="goods-info">
                <div class="goods-num">
                  <span class="product-id mr-5">
                    <span>ID:{{ data['id'] }}</span>
                  </span>
                  <div class="dis-inline">
                    <nz-tag [nzColor]="'rgb(252,99,16)'" *ngIf="data['activity_goods'][0]['type'] === 1">普通拼团</nz-tag>
                  </div>
                  <div class="dis-inline">
                    <nz-tag [nzColor]="'rgb(252,30,16)'" *ngIf="data['activity_goods'][0]['type'] === 2">拉新拼团</nz-tag>
                  </div>
                  <div class="dis-inline">
                    <nz-tag [nzColor]="'rgb(252,40,16)'" *ngIf="data['activity_goods'][0]['type'] === 3">抽奖拼团</nz-tag>
                  </div>
                  <div class="dis-inline">
                    <nz-tag [nzColor]="'rgb(252,60,16)'" *ngIf="data['activity_goods'][0]['type'] === 4">团长免单</nz-tag>
                  </div>
                </div>
                <div class="goods-name">{{data['name']}}</div>
              </div>
            </td>
            <td nz-td style="font-size: 12px;">
              <div>{{data['start_date']}}</div>
              <div>{{ data['end_date'] }}</div>
            </td>
            <td nz-td>
              <div style="margin-right: 30px;">
                <span style="color: #0F8EE9;font-size: 12px;cursor: pointer;" (click)="toggleFlexable(i)">查看活动商品
                  <i class="anticon" [ngClass]="{'anticon-up':data['flexable'],'anticon-down':!data['flexable']}"></i>
                </span>
              </div>
            </td>
          </tr>
          <ng-container *ngIf="data['flexable'] && data['goodsDetail']">
            <tr>
              <td nz-td>
                <img class="goods-preview" src="{{ aliyunOssOutputUrl + '/' + data['goodsDetail']['first_picture']  }}" alt="">
              </td>
              <td [attr.colspan]="2" nz-td>
                <div style="color: rgba(0,0,0,0.80);">ID:{{ data['goodsDetail']['id'] }}</div>
                <div>{{ data['goodsDetail']['goods_name'] }}</div>
              </td>
              <td nz-td>
                <div style="color: rgba(0,0,0,0.80);">商品价格</div>
                <div>￥ {{ data['goodsDetail']['price'] }}</div>
              </td>
            </tr>
          </ng-container>
        </ng-container>
      </tbody>
    </nz-table>
  </ng-template>
</nz-modal>
<!-- 添加活动弹窗 end -->

<!-- 添加卡券弹窗 -->
<nz-modal [nzVisible]="couponModalVisible" [nzTitle]="'添加卡券'" [nzWidth]="'700px'" [nzContent]="couponModalContent" (nzOnCancel)="closeCouponModal()"
  (nzOnOk)="confirmCheckedCoupon()">
  <ng-template #couponModalContent>
    <div class="operate-line text-right">
      <nz-input name="goodsName" style="width: 200px;" [nzSize]="'large'" [(ngModel)]="keyword" [nzPlaceHolder]="'输入卡券名称'"></nz-input>
      <button nz-button [nzType]="'primary'" [nzSize]="'large'" (click)="searchCoupon()">
        <span>查 询</span>
      </button>
      <button nz-button [nzType]="'default'" [nzSize]="'large'" (click)="reset()">
        <span>重 置</span>
      </button>
    </div>
    <nz-table #nzTable [nzAjaxData]="couponList" [nzLoading]="loading" [(nzPageIndex)]="page" [(nzPageSize)]="pageSize" [nzTotal]="couponsTotal"
      (nzPageIndexChange)="getCouponList()">
      <thead nz-thead>
        <tr>
          <th nz-th nzCheckbox style="width:80px;">
          </th>
          <th nz-th style="width: 240px;">
            <span>卡券</span>
          </th>
          <th nz-th>
            <span>卡券有效期</span>
          </th>
          <th nz-th>
            <span>卡券库存</span>
          </th>
        </tr>
      </thead>
      <tbody nz-tbody>
        <ng-container *ngFor="let data of couponList;let i = index;">
          <tr nz-tbody-tr>
            <td nz-td nzCheckbox>
              <i class="icon iconfont icon-radio-unchecked radio" *ngIf="currentClickCoupon['id'] !== data.id" (click)="activityClickIndex = i;currentClickCoupon = data;"></i>
              <i class="icon iconfont icon-radio-checked checked radio" *ngIf="currentClickCoupon['id'] === data.id"></i>
            </td>
            <td nz-td>
              <div class="goods-info">
                <div class="goods-num">
                  <span class="product-id mr-5">
                    <span>ID:{{ data['id'] }}</span>
                  </span>
                </div>
                <div class="goods-name">{{data['card_coupons_name']}}</div>
              </div>
            </td>
            <td nz-td style="font-size: 12px;">
              <ng-container *ngIf="data['term_of_validity']">
                <div>{{ '领取后' + data['term_of_validity'] + '天内有效' }}</div>
              </ng-container>
              <ng-container *ngIf="data['term_of_validity_time_start']">
                <div>{{ data['term_of_validity_time_start'] }}</div>
                <div>{{ data['term_of_validity_time_end'] }}</div>
              </ng-container>
            </td>
            <td nz-td>
              <div style="margin-right: 30px;">
                <div>{{ data['in_stock'] }}</div>
                <nz-progress style="width:95px;" [nzShowInfo]="false" [ngModel]="50"></nz-progress>
              </div>
            </td>
          </tr>
        </ng-container>
      </tbody>
    </nz-table>
  </ng-template>
</nz-modal>
<!-- 添加卡券弹窗 end -->
